import React, { useState, useEffect, useRef } from 'react'
import { Select, Button, TreeSelect, Form, Space, Upload, message } from 'antd'
import {
  SearchOutlined,
  DownloadOutlined,
  UploadOutlined
} from '@ant-design/icons'
import {
  getStatisticalAnalysis,
  uploadExcelWithEmergency
} from '&/api/electricity'
import './index.scss'

const Filter = ({ onQuery, paramsData, setParamsData, listParam }) => {
  const modalRef = useRef(null)
  const values = JSON.parse(localStorage.getItem('user'))
  const [treeData, setTreeData] = useState([])
  const [industryList, setIndustryList] = useState([])
  const [qiyes, setQiYes] = useState([])
  const [value, setValue] = useState()
  const uploadProps = {
    beforeUpload: async (file) => {
      const isExcel = file.name.split('.')[1] === 'xlsx'
      if (!isExcel) {
        message.error(`${file.name} 不是xlsx文件`)
        return Upload.LIST_IGNORE
      }
      return false
    },
    onChange: async ({ file }) => {
      const formData = new FormData()
      formData.append('file', file)
      const {
        data: { result }
      } = await uploadExcelWithEmergency(formData)
      if (result.res) {
        message.success(result.message)
      } else {
        message.error(result.message)
      }
      // const url = await FiletoDataURL(file)
      // setSelectFileUrl(url)
    }
  }
  useEffect(() => {
    getStatisticalAnalysisrequire(handleParams())
  }, [])
  const getStatisticalAnalysisrequire = () => {
    const params = {
      project_id: values.project_id
    }
    getStatisticalAnalysis(params).then((result) => {
      const areas = []
      result.area.map((o) => {
        areas.push({
          id: o.county_id,
          pId: 0,
          value: o.county_id,
          title: o.county_name,
          isLeaf: false,
          children: []
        })
      })
      const street = result.area.map((item) => {
        return item.towns.map((i) => {
          return {
            id: i.town_id,
            pId: item.county_id,
            value: i.town_id,
            title: i.town_name,
            isLeaf: true
          }
        })
      })
      // areas[1].children = street[0]
      areas.forEach((item, index) => {
        item.children = street[index]
      })
      areas.unshift({
        id: -1,
        pId: 0,
        value: -1,
        title: '全部',
        isLeaf: false
      })
      setTreeData(areas)
      const hangye = [
        {
          industry_type: '全部',
          industry_type_id: -1
        }
      ]
      result.industry.map((o) => {
        hangye.push({
          industry_type: o.industry_type,
          industry_type_id: o.industry_type_id
        })
      })
      setIndustryList(hangye)
      const qiye = [
        {
          ent_name: '全部',
          ent_id: '全部'
        }
      ]
      result.enterprise.map((o) => {
        qiye.push({
          ent_name: o.ent_name,
          ent_id: o.ent_id
        })
      })

      setQiYes(qiye)
    })
  }

  const handleParams = (paramsData) => {
    let newParamsData = {}
    for (let key in paramsData) {
      if (paramsData[key] != -1 && paramsData[key] != '全部') {
        newParamsData[key] = paramsData[key]
      }
    }
    return newParamsData
  }
  const onChange = (newValue) => {
    onQueryChange(newValue, 'area')
    setValue(newValue)
  }

  const onQueryChange = (v, t, option) => {
    if (t === 'area') {
      if (v > 100) {
        setParamsData((state) => {
          state.town_id = v
          delete state.county_id
          return {
            ...state
          }
        })
      } else {
        setParamsData((state) => {
          state.county_id = v
          delete state.town_id
          return {
            ...state
          }
        })
      }
    }
    if (t === 'industry') {
      setParamsData((state) => {
        state.industry_type_id = `${v}`
        return {
          ...state
        }
      })
    }
    if (t === 'xuanze') {
      setParamsData((state) => {
        state.ent_id = option?.key
        return {
          ...state
        }
      })
    }
  }

  const click = () => {
    let newParamsData = {}
    for (let key in paramsData) {
      if (
        paramsData[key] &&
        paramsData[key] != -1 &&
        paramsData[key] != '全部'
      ) {
        newParamsData[key] = paramsData[key]
      }
    }
    onQuery && onQuery(newParamsData)
  }
  const downloadExcel = () => {
    window.location.href = import.meta.env.VITE_EXCELDOWN_URL
  }
  return (
    <div className="EmergentMeausere-filter">
      <Form layout="inline">
        <Form.Item label="区域选择">
          <TreeSelect
            allowClear
            treeDataSimpleMode
            style={{
              width: '100%'
            }}
            value={value}
            defaultValue={paramsData.county_id}
            dropdownStyle={{
              maxHeight: 400,
              overflow: 'auto'
            }}
            placeholder="请选择区域"
            onChange={onChange}
            // loadData={onLoadData}
            treeData={treeData}
          />
        </Form.Item>
        <Form.Item label="行业选择">
          <Select
            allowClear
            placeholder={`请选择`}
            defaultValue={paramsData.industry_type_id}
            onChange={(v) => onQueryChange(v, 'industry')}
          >
            {industryList &&
              industryList.map((item) => (
                <Select.Option
                  value={item.industry_type_id}
                  key={item.industry_type_id}
                >
                  {item.industry_type}
                </Select.Option>
              ))}
          </Select>
        </Form.Item>
        <Form.Item label="企业选择">
          <Select
            showSearch
            allowClear
            placeholder={`请选择`}
            defaultValue={paramsData.ent_id}
            onChange={(v, option) => onQueryChange(v, 'xuanze', option)}
            style={{ width: '250px' }}
          >
            {qiyes &&
              qiyes.map((item) => (
                <Select.Option value={item.ent_name} key={item.ent_id}>
                  {item.ent_name}
                </Select.Option>
              ))}
          </Select>
        </Form.Item>
        {listParam?.control_type && <Form.Item>
          <Select
            style={{ width: '150px' }}
            disabled
            defaultValue={listParam.control_type}
            options={[
              { value: 1, label: '差异化减排' },
              { value: 5, label: '自主减排' }
            ]}
          />
        </Form.Item>}
        <Form.Item>
          <Button
            type="primary"
            onClick={click}
            icon={<SearchOutlined></SearchOutlined>}
          >
            查询
          </Button>
        </Form.Item>
      </Form>
      <div>
        <Space>
          <Button
            type="primary"
            onClick={downloadExcel}
            icon={<DownloadOutlined />}
          >
            下载模板
          </Button>
          {/* <Upload {...uploadProps} maxCount={1}>
            <Button
              type="primary"
              onClick={() => modalRef.current.showModelRef()}
              icon={<UploadOutlined />}
            >
              上传
            </Button>
          </Upload> */}
        </Space>
      </div>
      {/* <Modal
        title="模板上传"
        ref={modalRef}
        footer={false}
        width={600}
        style={{ top: 80 }}
        centered={false}
      >
        <Upload />
      </Modal> */}
    </div>
  )
}

export default Filter
